<template>
  <div>
      <van-nav-bar
         left-arrow
        class="app-nav-bar"
        title="异常处理新增"
        @click-left="$router.back()"
      />
      <van-form @submit="onSubmit">
           <van-field
                v-model="form.studentNo"
                label="学号"
                :rules="[{ required: true, message: '请填写学号' }]"
            />
            <van-field
                v-model="classContent"
                right-icon="arrow"
                label="班级"
                placeholder="请选择班级"
                @click="classListShare=true"
            />
            <van-action-sheet 
                v-model="classListShare"
                title="请选择"
                :actions="classList" 
                @select="onSelect1" 
            />
            <van-field
                v-model="form.studentName"
                label="姓名"
                :rules="[{ required: true, message: '请填写姓名' }]"
            />
             <van-field
             readonly
                v-model="statusContent"
                right-icon="arrow"
                label="处理状态"
                placeholder="请选择处理状态"
                @click="statusListShare=true"
            />
            <van-action-sheet 
                v-model="statusListShare"
                title="请选择"
                :actions="status" 
                @select="onSelect2" 
            />
             <van-field
                v-model="form.processDesc"
                label="处理描述"
                placeholder="处理描述"
                :rules="[{ required: true, message: '请填写处理描述' }]"
            />
            <!-- 提交 -->
            <div style="margin:16px">
                <van-button round block type="info" native-type="submit">提交</van-button>
            </div>
        </van-form>
  </div>
</template>

<script>
import {Notify} from 'vant'
export default {
    name:'ExcAdd',
    data(){
        return{
           form:{
               studentNo: '',
                classId: '',
                studentName: '',
                absenceProcessStatus: '',
                processDesc: '',
                processPersonId: 2,
           },
           tableData:[],
            status:[],
            statusListShare:false,
            statusContent:"",
            classList:[],
            classListShare:false,
            classContent:""
        }
    },
     methods:{
        async onSubmit(){
            var {data:res} = await this.$axios({
                url:this.$location.addExc,
                method:'post',
                data:this.$qs.stringify(this.form)
            })
            console.log(res)
            if(res.status==200){
                 this.$toast.success(res.msg)
                 this.$router.push('/AttenceExcList');
            }else if(res.status==400 && res.data==-1){
                Notify({ type: 'danger', message: res.msg });
            }else if(res.status==400 && res.data==-2){
                Notify({ type: 'danger', message: res.msg });
            }else if(res.status==400 && res.data==-3){
                Notify({ type: 'danger', message: res.msg });
            }
        },
        onSelect2(item){
            this.statusContent=item.name;
            this.form.absenceProcessStatus=item.value
            this.statusListShare = false;
        },
        async getStatusListAll(){
            const {data:res} =await this.$axios({url:this.$location.getProStatusListAll});
            res.data.forEach(item=>{
                this.status.push({
                    value:item.dictValue,
                    name:item.dictLabel
                })
            })
        },
        onSelect1(item){
            this.classContent=item.name;
            this.form.classId=item.id
            this.classListShare = false;
        },
        async getClassListAll(){
            const {data:res} =await this.$axios({url:this.$location.getClassListAll});
            res.data.forEach(item=>{
                this.classList.push({
                    id:item.id,
                    name:item.className
                })
            })
        }
    },
    created(){
         this.getStatusListAll();
         this.getClassListAll()
    }
}
</script>

<style lang="less" scoped>
    /deep/ .app-nav-bar{
        background-color: #35d299;
        .van-nav-bar__title{
            color: #fff;
        }
        .van-icon{
            color: #fff;
            
        }
    }
</style>